﻿<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Master_Page/Master_IPORT.Master" CodeBehind="frm_PortScheduler.aspx.vb" Inherits="I_PORT.frm_PortScheduler" 
    title="IRPC INTELLIGENT PORT SERVICE" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="../jquery-1.4.2.min.js" ></script>
<script src="../jquery-ui-1.8.2.custom.min.js" ></script>
<style type="text/css">
		#gallery { width:30%;float: left; min-height: 12em; background-color:#ffffff; } * html #gallery { height: 12em; } /* IE6 */
		.gallery.custom-state-active { background: #eee; }
		.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
		.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
		.gallery li a { float: right; }
		.gallery li a.ui-icon-zoomin { float: left; }
		.gallery li img { width: 100%; cursor: move; }

		
		#trash h4 { line-height: 16px; }
		#trash h4 .ui-icon { float: left; }
		#trash .gallery h5 { display: none; }
		
		#trash2 h4 { line-height: 16px; }
		#trash2 h4 .ui-icon { float: left; }
		#trash2 .gallery h5 { display: none; }
	</style>
	<script type="text/javascript">
	    function showtooltip(id,sCustomer,sAgent,sName,sLOA,sDWT,sDraft,sGRT,sDate,sProduct,sAmount) {
            document.getElementById(id).style.visibility = "visible";
            x = event.clientX + document.body.scrollLeft;
            y = event.clientY + document.body.scrollTop + 10;
            document.getElementById(id).style.display = "block";
            document.getElementById(id).style.left = x;
            document.getElementById(id).style.top = y;
            document.getElementById("TD_Customer").innerText = sCustomer;
            document.getElementById("TD_Agent").innerText = sAgent;
            document.getElementById("TD_NAME").innerText = sName;
            document.getElementById("TD_LOA").innerText = sLOA + '\xa0FT';
            document.getElementById("TD_DWT").innerText = sDWT + '\xa0FT';
            document.getElementById("TD_Draft").innerText = sDraft + '\xa0FT';
            document.getElementById("TD_GRT").innerText = sGRT + '\xa0FT';
            document.getElementById("TD_Date").innerText = sDate;
            document.getElementById("TD_Product").innerText = sProduct;
            document.getElementById("TD_Amount").innerText = sAmount;
        }
        function hidetooltip(id) {
            document.getElementById(id).style.visibility = "hidden";
        }
	    var dragga;
		$(function() {
			// there's the gallery and the trash
			var $gallery = $('#gallery'), $trash = $('#trash'), $trash2 = $('#trash2');

			// let the gallery items be draggable
			$('li',$gallery).draggable({
				cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
				revert: 'invalid', // when not dropped, the item will revert back to its initial position
				containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
				helper: 'clone',
				cursor: 'move'
			});

			// let the trash be droppable, accepting the gallery items
			$trash.droppable({
				accept: '#gallery > li',
				activeClass: 'ui-state-highlight',
				drop: function(ev, ui) {
//				  if (confirm('sure') == true)
//				  {
					//deleteImage(ui.draggable);
					 dragga = ui.draggable;
					  document.getElementById('ctl00_contentplaceholder1_framePopup').contentWindow.location.reload(true);
					  var imgid = ui.draggable.find('img');
					  document.getElementById('ctl00_contentplaceholder1_hdfid').value = imgid[0].id + '$00001';
					//  document.getElementById('ctl00_contentplaceholder1_btnTempClick').click;
					// var session = '<%Session("iport_id") = "imgid[0].id" %>';
					 var mpu = $find('ctl00_ContentPlaceHolder1_ModalPopupExtender1');
                     mpu.show();
//				   }
				}
			});

                $trash2.droppable({
				accept: '#gallery > li',
				activeClass: 'ui-state-highlight',
				drop: function(ev, ui) {
					deleteImage2(ui.draggable);
				}
			});

			// let the gallery be droppable as well, accepting items from the trash
			$gallery.droppable({
				accept: '#trash li',
				activeClass: 'custom-state-active',
				drop: function(ev, ui) {
					recycleImage(ui.draggable);
				}
			});

			// image deletion function
			var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off"></a>';
			function deleteImage($item) {
				$item.fadeOut(function() {
					var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
					$item.find('a.ui-icon-trash').remove();
					$item.append(recycle_icon).appendTo($list).fadeIn(function() {
					$item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
					});
				});
			}

            var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off"></a>';
			function deleteImage2($item) {
				$item.fadeOut(function() {
					var $list = $('ul',$trash2).length ? $('ul',$trash2) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash2);
					$item.find('a.ui-icon-trash').remove();
					$item.append(recycle_icon).appendTo($list).fadeIn(function() {
						$item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
					});
				});
			}
			// image recycle function
			var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" ></a>';
			function recycleImage($item) {
				//$item.fadeOut(function() {
					//$item.find('a.ui-icon-refresh').remove();
					//$item.css('width','96px').append(trash_icon).find('img').css('height','72px').end().appendTo($gallery).fadeIn();
				//});
			}

			// image preview function, demonstrating the ui.dialog used as a modal window
			function viewLargerImage($link) {
				var src = $link.attr('href');
				var title = $link.siblings('img').attr('alt');
				var $modal = $('img[src$="'+src+'"]');

				if ($modal.length) {
					$modal.dialog('open')
				} else {
					var img = $('<img alt="'+title+'" width="384" height="288" style="display:none;padding: 8px;" />')
						.attr('src',src).appendTo('body');
					setTimeout(function() {
						img.dialog({
								title: title,
								width: 400,
								modal: true
							});
					}, 1);
				}
			}

			// resolve the icons behavior with event delegation
			$('ul.gallery > li').click(function(ev) {
				var $item = $(this);
				var $target = $(ev.target);

				if ($target.is('a.ui-icon-trash')) {
					deleteImage($item);
				} else if ($target.is('a.ui-icon-zoomin')) {
					viewLargerImage($target);
				} else if ($target.is('a.ui-icon-refresh')) {
					recycleImage($item);
				}

				return false;
			});
		});
		 function closeModalOK() {
		    document.getElementById('ctl00_contentplaceholder1_framePopup').src = '../FormPopup/FrmPortScheduler_Popup.aspx';
            var mpu = $find('ctl00_ContentPlaceHolder1_ModalPopupExtender1');
            mpu.hide();
            document.getElementById('txtNumber').innerHTML = parseInt(document.getElementById('txtNumber').innerHTML) + 1;
            var $item = dragga;
            var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off"></a>';
			var $list = $('ul',$('#trash')).length ? $('ul',$('#trash')) : $('<ul class="gallery ui-helper-reset"/>').appendTo($('#trash'));
			$item.find('a.ui-icon-trash').remove();
			$item.append(recycle_icon).appendTo($list).fadeIn(function()
			{$item.animate({ width: '48px' }).find('img').animate({ height: '36px' });})
        }
         function closeModal() {
            document.getElementById('ctl00_contentplaceholder1_framePopup').src = '../FormPopup/FrmPortScheduler_Popup.aspx';
            var mpu = $find('ctl00_ContentPlaceHolder1_ModalPopupExtender1');
            mpu.hide();
        }
	</script>
	<asp:UpdatePanel ID="UpdatePanel1" runat="server">
	<ContentTemplate>
	<table width="100%" border="0" cellpadding="0" cellspacing="0">
	     <tr>
             <td style="height:5px;"><img src="../Image/space.gif" /></td>
         </tr>
	    <tr>
	       <td>
	       <div>
	    <table width="100%" border="1" cellpadding="0" cellspacing="0">
	       <tr>
	          <td valign="top" align="center" style="width:20%;">
	             <asp:Panel ID="PanelVessel" runat="server" Height="450px" ScrollBars="Vertical">    
                      <asp:Literal ID="Drag" runat="server"></asp:Literal>
	             </asp:Panel>
	          
	          </td>
	          <td style="background-image:url('../Image/BULK.gif');width:700px;height:450px; background-repeat: no-repeat;" valign="top">
	             <table width="100%" border="0" cellpadding="0" cellspacing="0">
	                <tr>
	                   <td style="width:700px">
                          <asp:Literal ID="LiTrash" runat="server" ></asp:Literal>
	                   </td>
	                </tr>
	             </table>
	            
	        	
	          </td>
	       </tr>
	    </table>
	</div>
	       </td>
	    </tr>
	</table>
	<div id="tooltip1" style="visibility: hidden; position: absolute">
        <table border="0" cellspacing="1" cellpadding="0" bgcolor="#663366">
            <tr>
                <td height="24" style="background-image: url('../images/HeaderBG.gif');" align="left">
                    &nbsp;
                    <asp:Label ID="Label10" runat="server" Font-Bold="True" CssClass="Head-tooltip" Text="Vessel Detail"></asp:Label>
                </td>
            </tr>
            <tr>
                <td bgcolor="#FFFFFF">
                    <table border="0" cellpadding="3" cellspacing="0" id="tblTooltip">
                        <tr>
                            <td>
                                <asp:Label ID="Label1" runat="server" Text="เจ้าของสินค้า." CssClass="White-Style"></asp:Label>
                            </td>
                            <td id="TD_Customer" class="White-Style">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="Label2" runat="server" Text="Ship's Agent." CssClass="White-Style"></asp:Label>
                            </td>
                            <td id="TD_Agent" class="White-Style">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="Label13" runat="server" Text="Vessel." CssClass="White-Style"></asp:Label>
                            </td>
                            <td id="TD_NAME" class="White-Style">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="Label4" runat="server" Text="LOA." CssClass="White-Style"></asp:Label>
                            </td>
                            <td id="TD_LOA" class="White-Style">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="Label5" runat="server" Text="DWT." CssClass="White-Style"></asp:Label>
                            </td>
                            <td id="TD_DWT" class="White-Style">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="Label6" runat="server" Text="Draft." CssClass="White-Style"></asp:Label>
                            </td>
                            <td id="TD_Draft" class="White-Style">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="Label7" runat="server" Text="GRT." CssClass="White-Style"></asp:Label>
                            </td>
                            <td id="TD_GRT" class="White-Style">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="Label3" runat="server" Text="วันที่." CssClass="White-Style"></asp:Label>
                            </td>
                            <td id="TD_Date" class="White-Style">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="Label8" runat="server" Text="COMMODITY." CssClass="White-Style"></asp:Label>
                            </td>
                            <td id="TD_Product" class="White-Style">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="Label9" runat="server" Text="QUANTITY." CssClass="White-Style"></asp:Label>
                            </td>
                            <td id="TD_Amount" class="White-Style">
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
	<!-- End demo -->
	   <asp:Button ID="btnTemp" runat="server" style="display: none;" />
	   <input id="hdfid" runat="server" type="hidden" />
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="Background" TargetControlID="btnTemp" PopupControlID="PopupAdd">
        </asp:ModalPopupExtender>
	    <asp:Panel ID="PopupAdd" runat="server" Style="display: none;">
        <table>
            <tr>
                <td>
                    <iframe runat="server" id="framePopup" class="Style-Iframe" marginheight="0px" marginwidth="0px" src="../FormPopup/FrmPortScheduler_Popup.aspx">
                    </iframe>
                </td>
            </tr>
        </table>
       </asp:Panel>
		</ContentTemplate>
    </asp:UpdatePanel>
<%--<script type="text/javascript"> 
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 1)
</script>--%>
</asp:Content>
